<template>
  <div>
    <el-dialog title="上传" v-model="visible" width="70%" top="5vh" append-to-body :close-on-click-modal="false">
      <div class="system-user-container" style="min-height: 500px;">
        <el-row :gutter="10" style="width: 100%;">
          <el-col :span="6">
            <el-card shadow="hover">
              <el-aside style="min-height: 600px;">
                <el-scrollbar>
                  <el-tree class="filter-tree" :data="data" node-key="id" :props="defaultProps"     highlight-current default-expand-all  ref="tree" @node-click="handleNodeClick">
                    <template v-slot="{ node, data }">
                      <el-icon >
                      <ele-FolderOpened/>
                      </el-icon>
                        <span style="padding-left: 10px;font-size: 16px;">
                          <div class="label" >{{ node.label }}</div>
                        </span>
                    </template>
                  </el-tree>
                </el-scrollbar>
              </el-aside>
            </el-card>
          </el-col>
          <el-col :span="18">
            <el-card shadow="hover">
              <div class="system-user-search mb15">
                       <el-row :gutter="10" style="width: 100%;">
                         <el-col :span="18">

                           <el-link type="primary" :underline="false" class="padding15"  @click="handleNew">
                             <el-icon class="brand-color">
                               <ele-FolderOpened/>
                             </el-icon>
                             <span class="p-l-10 blackColor">新建文件夹</span>

                           </el-link>
                           <el-link type="primary" :underline="false" class="padding15" @click="handleDel">
                             <el-icon class="brand-color">
                               <ele-Delete/>
                             </el-icon>
                             <span class="p-l-10 blackColor">删除</span>
                           </el-link>
                           <el-link type="primary" :underline="false" class="padding15" @click="handleEdit">
                             <el-icon class="brand-color">
                               <ele-EditPen/>
                             </el-icon>
                             <span class="p-l-10 blackColor">改名</span>
                           </el-link>
                         </el-col>
                         <el-col :span="6">
                                 <div style="text-align: right;">
                                     <el-button size="default" type="primary" class="ml10" @click="uploadFile">
                                       <el-icon>
                                         <ele-Upload />
                                       </el-icon>
                                         上传
                                     </el-button>
                                 </div>
                         </el-col>
                       </el-row>
              </div>
              <el-divider></el-divider>
               <div class="box" >
                 <el-row>
                   <el-col :span="4"  v-for="(item,index) in srcList" :key="index">
                      <div style="padding: 0 8px;margin-bottom: 15px;">
                        <el-card shadow="always" :body-style="{ padding: '0px' }">
                          <div class="demo-image__preview" style="text-align: center;" >
                            <div class="tag">png</div>
                            <el-image
                                style="width: 100%; height: 140px"
                                :src="item"
                                :preview-src-list="srcList">
                            </el-image>
                            <div class="image-title">
                              <el-checkbox >图片标题</el-checkbox>
                              </div>
                          </div>

                        </el-card>
                      </div>
                   </el-col>
                 </el-row>
                 <div class="block">
                   <el-pagination
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage4"
                       :page-sizes="[100, 200, 300, 400]"
                       :page-size="100"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="400">
                   </el-pagination>
                 </div>
               </div>

            </el-card>
          </el-col>
        </el-row>
      </div>

    </el-dialog>


  </div>
</template>

<script lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent} from 'vue';
import {ElMessage} from "element-plus";
interface QueryParam {
  ids:number[];
  defaultProps:{};
  data:any[];
  srcList:any[];
}

export default defineComponent({
  name: 'resourceFile',
  setup(prop,{emit}) {
    const visible = ref(false)
    const state = reactive<QueryParam>({
      ids:[],
      defaultProps:{
        children: 'children',
        label: 'label'
      },
      data: [{
        id: 2,
        icon: 'folder-blue',
        label: 'Files',
        children: [{
          id: 5,
          icon: 'folder-blue-item',
          label: '文件夹1'
        }]
      },
        {
          id: 2,
          icon: 'folder-blue',
          label: 'Image',
          children: [{
            id: 5,
            icon: 'folder-blue-item',
            label: '文件夹1'
          }]
        },
        {
          id: 2,
          icon: 'folder-blue',
          label: 'Documents',
          children: [{
            id: 5,
            icon: 'folder-blue-item',
            label: '文件夹1'
          }]
        }],
      srcList:[
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'


      ]
    });
    // 初始化表格数据
    const initTableData = () => {

    };


    // 页面加载时
    onMounted(() => {

    });

    const openDialog = ()=>{
      visible.value = true
    };
    const handleNew = () => {
      ElMessage.success('新建');
    };
    const handleDel = () => {
      ElMessage.success('删除');
    };
    const handleEdit = () => {
      ElMessage.success('修改');
    }

    return {
      visible,
      initTableData,
      handleNew,
      handleDel,
      handleEdit,
      openDialog,
      ...toRefs(state),
    };
  },
});
</script>
<style>
   .p-l-10{padding-left: 10px;}
   .brand-color{color: #409EFF;font-size: 16px;}
    .image-title{line-height: 32px;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: normal; padding: 0 8px;}
   .padding15{padding: 0 15px;}
   .tag{position: absolute;z-index: 999;color: #ffffff;background: #000000;padding: 3px 6px;}
   .hand-cursor {
     cursor: pointer;
   }
   .blackColor{color: #333333}
</style>
